<template>
    <div class="page-bg an-order-info">
        <van-nav-bar
            class="an-nav-bg"
            title="订单详情"
            left-text=""
            right-text=""
            left-arrow
            :fixed="true"
            @click-left="clickBack"
            />

        <!-- 订单状态 -->
        <div class="an-state">
          <div class="an-title">
            {{stateName(orderInfo.state) || "交易完成"}}
          </div>
          <van-image height="70" fit="contain" class="an-img" :src="stateImg" />
        </div>

        <!-- 收货地址-->
        <div class="an-address">
            <van-icon class="an-ico" name="location-o" size="25"/>
            <div >
                <div>{{orderInfo.consignee}} {{orderInfo.phone}}</div>
                <div>{{orderInfo.address}}</div>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="an-goods">
          <div class="an-box" v-for="item in orderInfo.orderDetails" :key="item.id">
              <van-card
                  :num="item.goodsNum"
                  :price="item.money"
                  :title="item.goods.name"
                  :thumb="item.goods.image"
                  :desc="item.goodsStandard"
                  />
          </div>
          <van-cell-group>
            <van-cell title="" label="商品总价" :value="'￥'+goodsTotal" />
            <van-cell title="" label="运费" :value="'￥'+orderInfo.freight" />
            <van-cell title="实付款" >
              <template #default>
                <span class="an-money orange">￥ <span class="an-number">{{orderInfo.totalMoney}}</span></span>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 订单信息 -->
        <div class="an-order-box">
          <div class="an-title">订单信息</div>
          <div class="an-form">
            <div class="an-form-row">
              <div class="an-lable">订单编号：</div>
              <div class="an-value">{{orderInfo.id}}</div>
            </div>
            <div class="an-form-row">
              <div class="an-lable">创建时间：</div>
              <div class="an-value">{{orderInfo.createTime}}</div>
            </div>
            <div class="an-form-row" v-if="orderInfo.payTime">
              <div class="an-lable">付款时间：</div>
              <div class="an-value">{{orderInfo.payTime}}</div>
            </div>
            <div class="an-form-row" v-if="orderInfo.deliveryTime">
              <div class="an-lable">发货时间：</div>
              <div class="an-value">{{orderInfo.deliveryTime}}</div>
            </div>
            <div class="an-form-row" v-if="orderInfo.confirmTime">
              <div class="an-lable">确认时间：</div>
              <div class="an-value">{{orderInfo.confirmTime}}</div>
            </div>
            <div class="an-form-row" v-if="orderInfo.completeTime">
              <div class="an-lable">订单关闭时间：</div>
              <div class="an-value">{{orderInfo.completeTime}}</div>
            </div>
            <div class="an-form-row">
              <div class="an-lable">订单备注：</div>
              <div class="an-value">{{orderInfo.customerNotes}}</div>
            </div>

          </div>
        </div>

        <!-- 底部操作栏 -->
        <van-action-bar class="an-action-bar">
          <van-action-bar-icon >
            <template #default>
              <div class="an-button-group">
                <van-button round plain size="small" type="default" v-if="orderInfo.state==1000" @click="closeOrder">取消交易</van-button>
                <van-button round plain size="small" type="warning" v-if="orderInfo.state==1000" @click="clickPlay">立即付款</van-button>
                <van-button round plain size="small" type="warning" v-if="orderInfo.state==1110 || orderInfo.state==1100"  @click="clickOk(orderInfo)">确认收货</van-button>
                <van-button round plain size="small" type="default" v-if="orderInfo.state<0" @click="clickDelete">删除订单</van-button>
              </div>
            </template>
          </van-action-bar-icon >
        </van-action-bar>

    </div>
</template>

<script>
import play from "../../assets/play.png";
import disappear from "../../assets/disappear.png";
import express from "../../assets/express.png";
import deliver from "../../assets/deliver.png";
import shop from "../../assets/shop.png";
export default {
  props:{
    id:{
      type: String,
      default:''
    }
  },
  data() {
    return{
      orderInfo:{},
      stateImg: play,
      goodsTotal: 0 // 商品总价
    };
  },
  created() {
    this.getInfo();
  },
  methods:{

    getInfo() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      });
      this.$api.orderInfo(this.id).then(res => {
        this.$toast.clear();
        this.orderInfo = res;
        this.stateImgChange(res.state);
        this.goodsTotal = this.allPrice(res);
      });
    },

    // 计算订单总价
    allPrice(item) {
      let nd = 0;
      item.orderDetails.forEach(element => {
        nd = nd + element.goodsNum * element.money * 100;
      });
      return nd/100;
    },

    // 订单图片转换
    stateImgChange(state) {
      switch(state) {
        case 1000:
          this.stateImg = play;
          break;
        case 1100:
          this.stateImg = deliver;
          break;
        case 1110:
          this.stateImg = express;
          break;
        case 2000:
        case 1120:
          this.stateImg = shop;
          break;
        default:
          this.stateImg = disappear;
      }
    },

    // 订单状态 转文字
    stateName(state) {
      return this.$api.orderState[state];
    },

    // 立即付款
    clickPlay() {
      let data = {
        orderID: this.orderInfo.id,
        total: this.orderInfo.totalMoney
      };
      let nd = encodeURI(JSON.stringify(data));
      this.$router.push({path:'/play', query:{prom: nd}});
    },

    // 关闭订单
    closeOrder() {
      let nd ={
        id: this.orderInfo.id,
        state: -1000
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('交易已取消');
        this.getInfo();
      });
    },

    // 确认收货
    clickOk(item) {
      let nd ={
        id: item.id,
        state: 1120
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('确认成功！');
        this.getInfo();
      });
    },

    // 删除订单
    clickDelete() {
      let nd ={
        id: this.orderInfo.id,
        isDelete: 1
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('删除成功');
        this.$router.push({ path: '/orderList'});
      });
    },

    clickBack() {
      this.$router.push({ path: '/orderList'});
    }
  }
};
</script>

<style lang="scss">
.an-action-bar{
  border-top: 1px solid #ececec;
  .van-action-bar-icon{
    width: 100%;
    text-align: right;
    &:active{
      background-color: #ffffff;
    }
  }
  .van-badge__wrapper{
    display: none;
  }
  .an-button-group{
    padding: 0 10px;
    .van-button{
      margin: 0 5px;
    }
  }
}
</style>
<style lang="scss" scoped>
.an-order-info{
  padding:46px 0 60px 0;
  .an-state{
    height: 100px;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: linear-gradient(to bottom right, #ff8f03, #ff4e00);
    .an-title{
      font-size: 18px;
      flex: none;
      width: 150px;
      padding-left: 20px;
    }
    .an-img{
      flex: auto;
    }
  }
  .an-address{
    padding: 15px;
    background-color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    position: relative;
    .an-ico{
        margin-right: 10px;
    }
  }
  .an-goods{
    margin-bottom: 10px;
    .an-money{
      .an-number{
        font-size: 18px;
      }
    }
  }
  .an-order-box{
    padding: 15px;
    color: #333;
    background-color: #ffffff;
    .an-title{
      font-size: 16px;
    }
    .an-form{
      padding: 10px 0;
      .an-form-row{
        padding: 5px 0;
        display: flex;
      }
    }
  }
}
</style>